{extend name="template/base_default"}
{block name="header"}

<link rel="stylesheet" href="__CSS__/weuix.min.css"/>
<script src="__JS__/updown.js"></script>
<script src="__JS__/lazyimg.js"></script>
<style>

    body{
        background-image:url("__IMG__/bj.png");
        background-repeat:no-repeat;
        background-size:cover;
        display:inline-block;
        text-align: center;
        color:#eeeeee;
        width: 100%;
        background-attachment: fixed;
    }
    .v-head{
        margin: auto;
        position:fixed;
        width: 100%;
        z-index: 100;

    }
    li{
        list-style: none;
        text-align: center;
    }
    .v-body{
        margin-top: 100px;
        z-index: -1;
        width: 100%;
        text-align: center;
    }
    .jf{

        width: 50%;
        height: 21px;
        text-align: center;

        margin: auto;
        margin-top: 10px;

    }
    .jf img{
        height: 20px;
        width: 20px;
        float: left;
    }
    .jf p{
        margin-left: 30px;
        height: 20px;
        line-height: 20px;
        float: left;
    }
    .titleList ul{
        border-radius: 25px;

        width:95%;
        margin: auto 2.5%;
        background-color: rgba(255, 255, 255, 0.1);
        text-align: center;
    }
    .lileft{
        float:left;
        height:auto;
        min-height:40px;
        color:#eeeeee;
        border: 1px solid #dddddd;
        font-size:16px;
        border-radius: 25px 0 0 25px;
        width:49%;
        text-align: center;
        line-height: 40px;
        list-style-type:none;
    }
    .liright{
        float:left;
        height:auto;
        min-height:40px;
        border: 1px solid #dddddd;
        color:#eeeeee;
        border-radius: 0 25px 25px 0;
        font-size:16px;
        width:49%;
        text-align: center;
        line-height: 40px;
        list-style-type:none;
    }
    .selected{
        background-color: rgba(255, 255, 255, 0.3);
    }
    .dropload-down1{
        width:100%;
    }
    .dropload-down2{
        width:100%;
        margin-left: auto;
        margin-right: auto;
    }
    .textItem{
        padding-left: 10px;
        margin-top: 26px;
        width:90%;
        height:110px;
        background-color: rgba(255, 255, 255, 0.7);
        margin-left: auto;
        margin-right: auto;
        color:#545454;
        border-radius: 10px;
        text-align: left;
        margin-top: 16px;
    }
    .weui-loading{
        margin-left: auto;
        margin-right: auto;
    }
    .textItem ul li{
        margin-top: 10px;
        text-align: left;
        float: left;
        width: 90%;
    }

    .block{
        height:50px;
        width:100%;

    }
    .v-head{
        background-color: #010C1D;
        height:90px;
    }
    .dropload-noData{
        width:100%;
        margin-left:auto;
        margin-right: auto;
    }
    .pay{
        width:100%;
    }
    .tixian{
        position: fixed;
        bottom: 0;
        width:100%;
        height:40px;
        background-color: #00a0e9;
        color: white;
        text-align: center;
        line-height: 40px;
    }
    .main_wrap{
        padding-bottom: 40px;
    }
</style>
{/block}
{block name="body"}
<div class="main_wrap">
<div class="v-head">
    <div class="jf">
        <p>我的收入：{$score/100}</p>
    </div>
    <div style="background-color: #010C1D">
        <div  class="titleList" style="width: 100%; padding:auto;margin-top: 10px">
            <ul >
                <li id="one" class="lileft selected">我的收入</li>
                <li class="liright">我的支出</li>
            </ul>
        </div>
    </div>
    <div class="block"></div>
</div>
<div style="height:20px;float: left;width:100%;text-align: center">
    <div class="v-body">
        <div id="myincome"  class="myincome"></div>
        <div id="pay" class="pay" style="display:none;"></div>
    </div>
</div>
    <div style="width:100%;height:50px"></div>
<a href="{:url('extension/tixian',array('account_id'=>$account_id,'account_type'=>$type))}">
<div class="tixian">
    积分提现
</div>
</a>
</div>
    {/block}
    {block name="footer"}
    <script type="text/javascript" src="__JS__/public.js"></script>
    <script>
        var type = '#myincome';
        var doClss ='dropload-down1';
        //  var page = 0;
        var dp = 0;
        var zp = 0;
        $(document).ready(function(){
            $('#one').trigger('click');
        });
        $(".titleList li").click(
            function buttomClick(){
                if(!$(this).hasClass('selected')){
                    $(this).addClass('selected');
                }
                $(this).siblings().removeClass('selected');
                if($(this).text()=='我的支出'){
                    $('#myincome').css("display","block");
                    $('#pay').css("display","none");
                    type = '#myincome';
                    cate = '1';
                    doClss ='dropload-down1';
                    $('.dropload-down1').remove();
                }
                else{
                    $('#pay').css("display","block");
                    $('#myincome').css("display","none");
                    type = '#pay';
                    cate = '2';
                    doClss ='dropload-down2';
                    $('.dropload-down2').remove();
                }
            }
        );



        $(".titleList li").click(function(){
//页数
            if(cate=='1'){
                page=dp;
            }else{
                page=zp;
            }
            $(type).dropload({
                scrollArea : window,
                autoLoad : true,//自动加载
                domDown : {
                    domClass   : doClss,
                    domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
                    domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
                    domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
                },
                loadDownFn : function(me){
                    var account_id = "{$account_id}";
                    var role_type = "{$type}";
                    page++;
                    if(cate=='1'){
                        dp=page;
                    }else{
                        zp=page;
                    }
                    //window.history.pushState(null, document.title, window.location.href);
                    var result = '';
                    $.ajax({
                        type: 'GET',
                        url:getBaseUrl()+'/web.php/extension/commission_details.html?page='+page+'&type='+cate+'&account_id='+account_id+'&role_type='+role_type,
                        dataType: 'json',
                        success: function(data){
                            // alert(data);
                            //  console.log(data);
                            var count = data.data.length;
                            if(count > 0){
                                for(var i=0; i<count; i++){
                                    var time = data.data[i].create_time;
                                    var date = new Date(parseInt(time) * 1000).toLocaleString();
                                    result+='<div class="textItem">'
                                        +'<ul>'
                                        +'<li class="title">'+data.data[i].reason+'</li>'
                                        +'<li class="title">'+date+'</li>'
                                        +'<li class="time">变动金额:'+parseInt(data.data[i].after_score-data.data[i].before_score)/100+'</li>'
                                        +'</ul>'
                                        +'</div>'
                                    ;
                                }
                                // 如果没有数据
                            }else{
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                            }

                            // 为了测试，延迟1秒加载
                            setTimeout(function(){
                                $('.'+doClss).before(result);
                                var lazyloadImg = new LazyloadImg({
                                    el: '.weui-updown [data-img]', //匹配元素
                                    top: 50, //元素在顶部伸出长度触发加载机制
                                    right: 50, //元素在右边伸出长度触发加载机制
                                    bottom: 50, //元素在底部伸出长度触发加载机制
                                    left: 50, //元素在左边伸出长度触发加载机制
                                    qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
                                    load: function(el) {
                                        el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
                                    },
                                    error: function(el) {

                                    }
                                });
                                //
                                // 每次数据加载完，必须重置
                                me.resetload();
                            },0);
                        },
                        error: function(xhr, type){
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            me.lock();
//                        me.noData();
//                        me.resetload();
                        }
                    });
                }
            });
        });
    </script>
    {/block}